<template>
    <div id="video-p">
        <div class="move-bar video-progress" @mousemove="move" @click="click">
            <varrow class="arrow" :style="{left: moveParam.arrow}"></varrow>
            <div class="move-bar video-progress-bar">
                <!--当前播放的进度-->
                <span class="move-bar bar bar1" :style="{width: getPlayProgress()}">
                    <span class="bar-point" @mouseenter="enter"></span>
                </span>
                <!--加载的进度-->
                <span class="move-bar bar bar2" :style="{width: getPlayLoad()}"></span>
                <!--标记点-->
                <span class="dot-bar bar">
                    <span class="dot-item" v-for="(d, index) in dot" @mouseenter="enterDot(index)" :style="{left: getDotPosition(d.time)}" :title="d.name"></span>
                </span>
            </div>
        </div>
    </div>
</template>

<script>
    'use strict';

    import {baseUtil} from "../../common/js/BaseUtil";
    import varrow from './v-arrow';

    export default {
        name: "v-progress",
        components: {varrow},
        props: {
            currentTime: {
                type: Number,
                default: () => {
                    return 10;
                },
                desc: '当前的播放时间'
            },
            loadTime: {
                type: Number,
                default: () => {
                    return 50;
                },
                desc: '加载时长'
            },
            duration: {
                type: Number,
                default: () => {
                    return 100;
                },
                desc: '总时长'
            },
            hover: {
                type: Boolean,
                default: () => {
                    return false;
                },
                desc: '是否悬浮在面板上'
            },
            dot: {
                type: [Object, Array],
                default: () => {
                    return [
                        // {name: '片头', time: 80, style: ''},
                        // {name: '片头', time: 90, style: ''}
                    ]
                },
            }
        },
        data() {
            return {
                baseUtil: baseUtil,
                dataUtil: baseUtil.getDateUtil(),

                // 获取播放器容器的宽度
                maxLength: 0,
                pLength: 0,

                currentTime2: this.currentTime,

                // 移动事件
                moveParam: {
                    percent: 0,
                    arrow: '0%'
                },

            }
        },
        computed: {

        },
        methods: {
            /**
             * 计算当前播放器的播放进度
             * @return {String}
             */
            getPlayProgress() {
                if(this.totalTime === 0) {
                    return '0%';
                }else {
                    return (this.currentTime / this.duration * 100) + '%';
                }
            },
            /**
             * 计算当前播放器的加载进度
             * @return {String}
             */
            getPlayLoad() {
                if(this.totalTime === 0) {
                    return '0%';
                }else {
                    return (this.loadTime / this.duration * 100) + '%';
                }
            },
            getDotPosition(time = 0) {
                return (time / this.duration * 100) + '%';
            },
            /**
             * 移动到进度条上的事件
             * @param event
             */
            move(event) {
                // 当前移动到的位置（需要减去滑动块的宽度的一半）
                let x = event.offsetX;
                let eventClass = event.path[0].getAttribute("class").split(" ")[0];
                if(eventClass === 'move-bar') {
                    this.moveParam.percent = x / this.maxLength * 100;
                    let p = this.moveParam.percent - this.pLength / 2;
                    this.moveParam.arrow = p + '%';
                }
            },
            /**
             * 点击进度条上的事件
             */
            click() {
                let time = this.dataUtil.formatTime(this.moveParam.percent / 100 * this.duration);
                console.log(time);
                this.changeProgress();
            },
            /**
             * 移动到当前播放位置上的事件
             */
            enter() {
                this.moveParam.arrow = (this.currentTime2 / this.duration * 100 - this.pLength) + '%';
            },
            enterDot(index = 0) {
                this.moveParam.arrow = (this.dot[index].time / this.duration * 100) - this.pLength / 10 + '%';
                console.log(this.arrow);
            },
            /**
             * 改变进度条事件
             */
            changeProgress() {
                this.$emit('goto', this.moveParam.percent / 100 * this.duration)
                // this.currentTime2 = this.moveParam.percent / 100 * this.duration;
            }
        },
        created() {

        },
        mounted() {
            this.maxLength = document.getElementById("video-p").offsetWidth;
            this.pLength = 10 / this.maxLength * 100;
        }
    }
</script>

<style lang="scss" scoped>

    @import '../../common/css/theme.sass';
    // 进度条宽度
    $barWidth: 98% 100%;
    // 进度条高度
    $barHeight: 2px 4px;
    // 0.1s的匀速动画
    $linearAnimation: linear 0.1s;

    .video-progress{
        position: relative;
        /*padding: 5px;*/
        height: 20px;
        width: 100%;
        /*background-color: black;*/
        margin: 1px (100% - nth($barWidth, 2)) / 2;
        cursor: pointer;

        .arrow{
            height: 100%;
            position: absolute;
            top: 0;
            left: -5px;
            opacity: 0;
            transition: opacity linear 0.2s;
        }

        &:hover {

            .arrow{
                opacity: 1;
            }

            div.video-progress-bar {
                height: nth($barHeight, 2);
                border-radius: nth($barHeight, 2) / 2;
                bottom: 10px - nth($barHeight, 2) / 2;

                & > span {
                    &.bar {
                        border-radius: nth($barHeight, 2) / 2;
                        height: nth($barHeight, 2);

                        & > span.bar-point {
                            top: nth($barHeight, 2) / -2;
                            width: nth($barHeight, 2) * 2;
                            height: nth($barHeight, 2) * 2;
                            /*border-radius: nth($barHeight, 2);*/
                        }
                        & > span.dot-item{
                            width: nth($barHeight, 1) * 2;
                            height: nth($barHeight, 1) * 2;
                        }

                    }

                }
            }
        }


        div.video-progress-bar{
            position: absolute;
            width: nth($barWidth, 2);
            height: nth($barHeight, 1);
            border-radius: nth($barHeight, 1) / 2;
            /*overflow: hidden;*/
            bottom: 10px - nth($barHeight, 1) / 2;
            background-color: $themeGray;

            transition: bottom 0.1s, height #{$linearAnimation}, width #{$linearAnimation}, margin #{$linearAnimation};


            &>span{
                display: inline-block;
                position: absolute;
                &.bar{
                    border-radius: nth($barHeight, 1) / 2;
                    width: 100%;
                    height: nth($barHeight, 1);
                    &.bar1{
                        z-index: 100;
                        background-color: $themeColor;
                    }
                    &.bar2{
                        z-index: 99;
                        background-color: $themeGray;
                    }
                    &>span.bar-point{
                        display: inline-block;
                        position: absolute;
                        z-index: 102;
                        top: 0;
                        right: 0;
                        width: nth($barHeight, 1);
                        height: nth($barHeight, 1);
                        border-radius: 50%;
                        background-color: white;
                        transition: left #{$linearAnimation}, top #{$linearAnimation},width #{$linearAnimation},height #{$linearAnimation}, border-radius #{$linearAnimation};
                    }
                    transition: width #{$linearAnimation}, height #{$linearAnimation};

                    &>span.dot-item{
                        display: inline-block;
                        position: absolute;
                        z-index: 101;
                        width: nth($barHeight, 1);
                        height: nth($barHeight, 1);
                        border-radius: 50%;
                        background-color: white;
                        transition: width #{$linearAnimation},height #{$linearAnimation};
                    }

                }

            }

        }

    }

</style>
